<template>
	<view class="uiwu-score uiwu-flex uiwu-flex-align">
		<view class="uiwu-score-item" @tap.stop="scoreTap(item,'close')" v-for="(item,index) in selected_num" :key="getKey(index)">
			<slot name="selected">
				<uiwu-icon v-if="!imgSelected" :type="selectedIcon" :size="sizeIcon" :color="colorIcon" ></uiwu-icon>
				<image v-if="imgSelected" :src="imgSelected" mode="widthFix" :style="{'width':imgWidth}"></image>
			</slot>
		</view>
		<view class="uiwu-score-item" @tap.stop="scoreTap(item,'add')" v-for="(item,index) in default_num" :key="getKey(index)">
			<slot name="default">
				<uiwu-icon v-if="!imgDefault" :type="defaultIcon" :size="sizeIcon" :color="colorIcon" ></uiwu-icon>
				<image v-if="imgDefault" :src="imgDefault" mode="widthFix" :style="{'width':imgWidth}"></image>
			</slot>
		</view>
	</view>
</template>
<script>
	/**
	 * uiwu-score 评分组件 支持插槽模式 selected选中插槽  default默认插槽
	 * @property {String} img-selected 选中星星图片地址 可以是本地路径，可以是网络路径 [注意传递图片后字体图标将会失效]
	 * @property {String} img-default 默认星星图片地址 可以是本地路径，可以是网络路径 [注意传递图片后字体图标将会失效]
	 * @property {String} img-width 星星图片的大小默认44rpx 传递星星图片后生效
	 * @property {String} selected-icon 选中星星字体类型 默认 star-filled 字体名字具体可以参考 [https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html] 
	 * @property {String} default-icon 默认星星字体类型 默认 star 字体名字具体可以参考 [https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html] 
	 * @property {String} colorIcon 字体图标颜色 
	 * @property {String,Number} sizeIcon 字体图标大小 
	 * @event {Function()} change 返回选中星星的个数 比如 4 
	 */
	export default {
		name:'uiwuScore',
		props:{
			imgWidth:{
				default:'44rpx',
				type:String
			},
			imgSelected:{
				default:'',
				type:String
			},
			imgDefault:{
				default:'',
				type:String
			},
			selectedIcon:{
				default:'star-filled',
				type:String
			},
			defaultIcon:{
				default:'star',
				type:String
			},
			colorIcon:{
				default:'#999',
				type:String
			},
			sizeIcon:{
				default:24,
				type:Number || String
			},
			selected:{
				default:0,
				type:Number
			},
			disabled:{
				default:false,
				type:Boolean
			}
		},
		watch:{
			selected(){
				this.selected_num = this.selected
				this.default_num = this.default_num - this.selected
			}
		},
		data() {
			return {
				selected_num:0,
				default_num:5
			}
		},
		created() {
			this.selected_num = this.selected
			this.default_num = this.default_num - this.selected
		},
		methods:{
			getKey(i){
				return new Date().getTime() + Math.random() + i
			},
			scoreTap(i,type){
				if(this.disabled) return
				if(type == 'close'){
					this.selected_num = i
					this.default_num = 5 - this.selected_num
				}else{
					this.selected_num = this.selected_num + i
					this.default_num = 5 - this.selected_num
				}
				this.$emit('change',this.selected_num)
			}
		}
	}
</script>
<style lang="scss" scoped>
	.uiwu-score{
		&-item{
			margin: 0 5rpx;
		}
	}
</style>
